<template>
	<!-- 图片字体，
			接收字体类型type
			继承字体大小，颜色，框大小 -->
	<i class="iconfont" :class="cname" :style="styles"></i>
</template>

<script>
let icons = {
	arrowUp: 'icon-shangjiantou',
	arrowDown: 'icon-xiajiantou',
	arrowLeft: 'icon-zuojiantou',
	arrowRight: 'icon-youjiantou',
	search: 'icon-sousuo1',
	bili: 'icon-bilibili',
	logo: 'icon-bilibili-line',
	phone: 'icon-shouji',
	refresh: 'icon-shuaxin',
	refresh2: 'icon-shuaxin1',
	add: 'icon-jia',
	hot: 'icon-remen',
	home: 'icon-shouye',
	ranking: 'icon-paihangbang_paiming',
	play: 'icon-caozuo-bofang',
	time: 'icon-time',
	circle: 'icon-quanquanb',
	nice: 'icon-dianzan',
	dt: 'icon-iconfontdongtai',
	up: 'icon-UPzhu',
	plays: 'icon-xunhuanbofang',
	close: 'icon-cha-',
	language: 'icon-yuyan-kong',
	yes: 'icon-check',
	column: 'icon-tianjiazhuanlan_chuangjianzhuanlan',
	reference: 'icon-tougao',
	music: 'icon-yinpin',
	wx: 'icon-weixin1',
	wb1: 'icon-weibo',
	wb2: 'icon-weibo1',
	download: 'icon-xiazai',
	qq: 'icon-QQ',
	tv: 'icon-TV'
}
export default{
	props:{
		type:{
			type: String,
			default: 'arrowUp'
		},
		styles:{
			type: Object
		}
	},
	computed:{
		cname(){
			return icons[this.type];
		}
	}
}
</script>

<style scoped>
@import 'https://at.alicdn.com/t/font_2116699_muwnofd56j.css';
i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: color .3s;
	font-size: inherit;
}
</style>
